<template>
  <BaseMainSlot
    :show-tab="false"
    :show-search-box="false"
  >
    <template v-slot:search-box>
      
    </template>
    <template v-slot:btn-box>
      <SelectButton
        v-if="showSelectButton"
        :buttonselectlist="buttonselectlist"
        buttonselect-name="stordocName"
        @nowselectbuttonindex="batchstaumet"
      />
      <!-- <ActionBar
        :page-no="76"
        :add-active="addActive"
        :del-active="delActive"
        :has-edit="false"
        :has-save="false"
        :has-cancel="false"
        @add="add"
        @del="del"
      /> -->
    </template>
    <template v-slot:table-box>
      <div class="all-count">
        <div class="allbox">
          <div class="left">
            <img src="~@/assets/quantity/icon1.png" alt="">
          </div>
          <div class="right">
            <div>总数量</div>
            <div>{{ count1 }}</div>
          </div>
        </div>
        <div class="allbox">
          <div class="left">
            <img src="~@/assets/quantity/icon2.png" alt="">
          </div>
          <div class="right">
            <div>总结存数量</div>
            <div>{{ count2 }}</div>
          </div>
        </div>
      </div>
      <div class="table-box-main">
        <div class="main-left">
          <el-table
            ref="tableDataLeft"
            v-loading="loadingLeft"
            :data="tableDataLeft"
            highlight-current-row
            stripe
            border
            height="100%"
            @row-click="rowLeftClick"
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="materialName" label="物料" min-width="60">
            </el-table-column>
          </el-table>
        </div>
        <div class="main-right">
          <el-table
            ref="tableData"
            v-loading="loading"
            highlight-current-row
            :data="tableData"
            stripe
            border
            height="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column
              v-for="(item, index) in formDatalists"
              :key="index"
              :prop="`${item.porp}`"
              :label="item.name"
              :min-width="item.porp === 'batchtime'? '160' : '130'"
              :column-key="`${item.porp}`"
            >
              <template
                v-if="scope.row[`batchNo`] !== undefined"
                slot-scope="scope"
              >
                <span
                  v-if="item.porp === 'onHandQuantity' || item.porp === 'num' "
                >
                  {{ scope.row[`${item.porp}`] }}
                  {{ scope.row[`${item.porpObj}`][`${item.porpName}`] }}
                </span>
                <span v-else>
                  {{
                    item.porpObj
                      ? scope.row[`${item.porpObj}`][`${item.porpName}`]
                      : scope.row[`${item.porp}`] || "——"
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />-->
    </template>
    <template v-slot:dialog></template>
  </BaseMainSlot>
</template>

<script>
// import ActionBar from "@/components/ActionBar";
// import Pagination from "@/components/Pagination";
import Table from '@/components/table/table.vue';
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
import SelectButton from "@/components/selectbutton";

import quantityApi from "@/api/livestock-manage/storage-manage/quantity-on-hand";
import personApi from "@/api/livestock-manage/personnel-cost-mansge/staff-manage";
import warehouseApi from "@/api/livestock-manage/storage-manage/warehouse-manage";

export default {
  name: "SheepInformation",
  components: {
    // ActionBar,
    // Pagination,
    Table,
    BaseMainSlot,
    SelectButton
  },
  mixins: [mymixin],
  data() {
    return {
      count1: '',
      count2: '',
      selectedStaffList: [],
      // selectValue 用于传递select的编号
      formDatalists: [
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "batchNo",
          selectValue: "",
          typeObj: {},
          name: "行号",
          required: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "lotNumber",
          porpObj: "batchFile",
          porpName: "lotNumber",
          selectValue: "",
          typeObj: {},
          name: "批号",
          required: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "num",
          porpObj: "castUnit",
          porpName: "symbol",
          selectValue: "",
          typeObj: {},
          name: "数量",
          required: false,
          notSearch: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "onHandQuantity",
          porpObj: "cUnit",
          porpName: "symbol",
          selectValue: "",
          typeObj: {},
          name: "结存数量",
          required: false,
          notSearch: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "changerate",
          selectValue: "",
          typeObj: {},
          name: "换算率",
          required: true,
          notSearch: true
        },
        {
          type: "Select", // input Select Checkbox TimePicker
          porp: "batchtime",
          porpObj: "batchFile",
          porpName: "batchtime",
          selectValue: "",
          typeObj: {},
          name: "批次生成时间",
          required: true,
          notSearch: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "produceDate",
          porpObj: "batchFile",
          porpName: "produceDate",
          selectValue: "",
          typeObj: {},
          name: "生产日期",
          required: true,
          notSearch: true
        },
        {
          type: "Select", // input Select Checkbox TimePicker
          porp: "expirationDate",
          porpObj: "batchFile",
          porpName: "expirationDate",
          selectValue: "",
          typeObj: {},
          name: "失效日期",
          required: true,
          notSearch: true
        }
      ],
      buttonselectlist: [],
      stordocNo: "",
      materialNo: "",
      tableDataLeft: [],
      loadingLeft: false,
      currentRow: null,
      showSelectButton: false,
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  created() {
    // this.search();
    this.getPerson();
    // this.getMaterialType();
    this.getwarehouse();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    setCurrent(row) {
      // this.$n
      this.$nextTick(() => {
        this.$refs.tableDataLeft.setCurrentRow(this.tableDataLeft[0], true);
      });
    },
    rowLeftClick({ materialNo }) {
      this.tableData = [];
      this.materialNo = materialNo;
      this.getTableDataList();
    },
    // 仓库查询
    batchstaumet(i) {
      // console.log(i);
      this.nowbatchstau = i;
      this.nowbatchstauName = this.buttonselectlist[i]?.stordocName;
      this.stordocNo = this.buttonselectlist[i]?.stordocNo;
      // console.log(item)
      this.getMaterialType(this.stordocNo);
    },
    getwarehouse() {
      warehouseApi.conditionQuery({}).then(res => {
        this.buttonselectlist = res.data.map(el => {
          return { ...el, name: el.stordocName }
        });
        this.showSelectButton = true
      });
    },
    getMaterialType(e) {
      quantityApi.queryCheckNo(e).then(res => {
        this.tableDataLeft = res.data || [];

        if (this.tableDataLeft?.length > 0) {
          const { materialNo } = res.data[0];
          this.materialNo = materialNo;
          this.setCurrent({ ...this.tableDataLeft[0] });
          this.getTableDataList();
        } else {
          this.getTableDataList();
        }
        // this.getTableDataList(res.data[0])
        
        // 表格填充
        let havline = this.tableDataLeft.length % this.pageSize
        if (this.tableDataLeft.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.tableDataLeft.push({ 'index': i + this.tableDataLeft.length + 1 });
            }
          }
        }
      });
    },
    // 获取记录人列表
    getPerson() {
      personApi.getStaffListByCondition().then(res => {
        if (res.code === 1) {
          let list = [];
          this.personList = res.data || [];
          res.data.forEach(item => {
            list.push({
              name: item.person.name,
              value: item.personNo
            });
          });
          this.formDatalists.forEach((item, index) => {
            if (item.porp === "personName") {
              this.$set(this.formDatalists[index].typeObj, "list", list);
            }
          });
        }
      });
    },
    getTableDataList() {
      this.loading = true;
      let params = {
        // page: 1,
        // size: 100000,
        // etity: {
        stordocNo: this.stordocNo || -1,
        materialNo: this.materialNo || -1,
        ...this.searchObj
        // }
      };
      quantityApi.conditionQuery(params).then(res => {
        this.loading = false;
        let data = res.data;
        let count1 = 0, count2 = 0
        data.map(el => {
          count1 += el.num
          count2 += el.onHandQuantity
        })
        if (data[0] && data[0].castUnit?.symbol) {
          count1 += data[0].castUnit.symbol
          count2 += data[0].castUnit.symbol
        }
        this.count1 = count1
        this.count2 = count2
        // 赋值总条数
        if (data) {
          // this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data;
          this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    handleSelectionChange(list) {
      this.selectedStaffList = [];
      this.selectedStaffList = list.map(item => item.batchNo);
      if (this.selectedStaffList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    delmessage() {
      quantityApi
        .numberBatchDel({ noList: this.selectedStaffList })
        .then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.search();
          } else {
            this.$message.warning(res.msg || "删除失败");
          }
        });
    },
    handleDelete(val) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          quantityApi.numberDel(val).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.search();
            } else {
              this.$message.warning(res.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    add() {
      this.formData = {};
      this.nowChanceStau = "add";
      this.titleText = "添加供应商";
      this.addActive = false;
      this.delActive = false;
      this.dialogFormVisible = true;
    },
    edit(row) {
      this.formData = { ...row };
      this.nowChanceStau = "edit";
      this.titleText = "修改供应商";
      this.dialogFormVisible = true;
      this.addActive = true;
      this.delActive = false;
    },
    save(formData) {
      console.log(this.formData);
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            let formData = { ...this.formData };
            quantityApi.edit(formData).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "修改成功！");
                this.dialogFormVisible = false;
                this.search();
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            let person = { ...this.formData };
            quantityApi.add(person).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "新增成功！");
                this.dialogFormVisible = false;
                this.search();
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "新增失败！");
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";

::v-deep {
  .tab-select {
    position: absolute;
    top: 6px;
    left: 10px;
  }
}

.table-box-main {
  height: calc(100% - 100px);
  width: 100%;
  padding: 5px;
  display: flex;
  // background: white;
  border-radius: 5px;
  position: absolute;
  justify-content: space-between;
  flex-wrap: wrap;
  .main-left {
    padding: 5px;
    width: 20%;
    min-width: 200px;
    height: calc(100% - 20px);
    // box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }

  .main-right {
    // box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 10px;
    width: 79%;
    height: calc(100% - 20px);
  }
}
.all-count {
  height: 80px;
  display: flex;
  padding-left: 10px;
  margin: 5px 0;

  .allbox {
    width: 320px;
    display: flex;
    background: linear-gradient(to bottom, #68eacf, #15a8bc);
    margin-right: 25px;
    border-radius: 8px;

    .left {
      width: fit-content;
      padding: 26px;
      border-right: 1px dotted #fff;
    }

    .right {
      width: calc(100% - 40px);
      display: flex;
      line-height: 80px;
      justify-content: center;

      &>div {
        font-size: 22px;

        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
